<!DOCTYPE html>
<html>
<head>
<title>会员中心</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<link href="/static/webAPP/css/reset.css" rel="stylesheet" type="text/css">
<style>
    .member{
        width: 100%;
        min-width: 300px;
        height: 600px;
    }
    .member-top {
        position: fixed;
        width: 100%;
        height: 45px;
        line-height: 45px;
        z-index: 9999;
        top: 0;
        left: 0;
        color: #333333;
        background: #FFFFFF;
        text-align: center;
        border-bottom: 1px solid #F3F3F3;
    }
    .member-t1,
    .member-t2{
        float: left;
    }
    .member-t1 {
        width: 30%;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        background: url(/static/webAPP/images/arrow-left.png) no-repeat 10px center;
        background-size: 20%;
    }
    .member-t2 {
        width: 40%;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
    }
    .member-bg{
        margin-top: 25px;
        width: 100%;
        height: 186px;
        background: url(/static/webAPP/images/dicheng.png);
        background-size: 100% 100%;
    }
    .member-user{
        width: 100%;
        min-width: 300px;
        height: 200px;
        background-image: url(/static/webAPP/images/huiyuankadi.png);
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 120px;
    }
    .member-user-avatar{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color: #fff;
        margin: -15px 3% 0 6%;
        float: left;
        position: relative;
    }
    .member-user-avatar-1{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .member-user-avatar-2{
        width: 22px;
        height: 19px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .member-user-name{
        margin-top: 40px;
        font-size: 23px;
        font-weight: bold;
        color: #664731;
    }
    .member-user-level{
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
    }
    .member-balance{
        float: right;
        width: 48%;
    }
    .member-balance-title{
        font-size: 13px;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: -25px;
    }
    .member-balance-info{
        font-size: 28px;
    }
    .member-open{
        display: block;
        width: 84%;
        font-size: 15px;
        background-color: #312218;
        height: 28px;
        border-radius: 15px;
        color: #F4C64E;
        line-height: 28px;
        text-align: center;
        margin-top: 10px;
    }

    /* 充值区域 */
    .member-body{
        width: 100%;
        margin-top: 110px;
    }
    .member-body-title{
        width: 92%;
        height: 50px;
        line-height: 50px;
        margin-left: 4%;
        font-weight: bold;
    }
    .member-body-box{
        width: 100%;
        height: 178px;
    }
    .money-box{
        width: 28%;
        height: 140px;
        background-color: #F7F7F7;
        text-align: center;
        border-radius: 7px;
        float: left;
        margin-left: 4%;
        border: 1px solid #E5E5E5;
        box-sizing: border-box;
    }
    .money-box-title{
        width: 100%;
        font-size: 17px;
        float: left;
        margin-top: 10px;
        font-weight: 600;
    }
    .money-box-num{
        width: 100%;
        font-size: 12px;
        color: #E2B666;
        float: left;
        margin: 10px 0;
    }
    .money-box-num i{
        font-size: 28px;
    }
    .money-box-body{
        width: 94%;
        font-size: 12px;
        color: #9A9A9A;
        float: left;
        margin-left: 3%;
    }
    .member-btn{
        width: 90%;
        height: 60px;
        margin-left: 5%;
        background-color: #E9C788;
        border-radius: 50px;
        float: left;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
</style>
</head>
<body>
<div class="member">
      <div class="member-top">
            <a href="javascript:history.go(-1);" class="member-t1"></a>
            <span class="member-t2">会员中心</span>
      </div>
      <div class="member-bg"></div>
      <div class="member-user">
          <div class="member-user-information">
            <div class="member-user-avatar">
                <span class="member-info-img1"><img class="member-user-avatar-1" src="/static/webAPP/images/people1.png" alt=""></span>
                <li class="member-user-avatar-info"></li>
            </div>
            <div class="member-user-name">未登录</div>
            <div class="member-user-level">你还不是会员</div>
          </div>
          <div class="member-balance">
            <div class="member-balance-title">账号余额:<i class="member-balance-info">0.00</i>元</div>
            <div class="member-open-info"><a href="javascript:void(0);" class="member-open">立即开通 / 成为会员</a></div>
          </div>
      </div>
      <div class="member-body">
          <div class="member-body-title">选择充值金额</div>
          <div class="member-body-box">


            <a href="javascript:void(0);" class="money-box">
                <span class="money-box-title">充值金额</span>
                <span class="money-box-num">￥<i>200</i></span>
                <span class="money-box-body">赠送20元</span>
            </a>
            <a href="javascript:void(0);" class="money-box">
                <span class="money-box-title">充值金额</span>
                <span class="money-box-num">￥<i>400</i></span>
                <span class="money-box-body">赠送50元</span>
            </a>
            <a href="javascript:void(0);" class="money-box">
                <span class="money-box-title">充值金额</span>
                <span class="money-box-num">￥<i>1000</i></span>
                <span class="money-box-body">赠送150元</span>
            </a>


          </div>
      </div>
      <a href="javascript:void(0);" class="member-btn">立即购买</a>
</div>
<script src="/static/webAPP/js/jquery-1.8.3.min.js"></script>
<script src="/static/webAPP/lib/mobile/layer.js"></script>
<script>
        var appId = null;
        var timeStamp = null;
        var nonceStr = null;
        var prepayId = null;
        var signType = null;
        var paySign = null;
	$(function(){
		var level = sessionStorage.getItem("sessionMembershiplevel")
		var userMony = sessionStorage.getItem("sessionMembershipremaining")
		var user_id = sessionStorage.getItem("sessionUserid")
		var userName = sessionStorage.getItem("sessionName")
		var usernickname = sessionStorage.getItem("sessionUsernickname")
		$(".member-user-name").html(usernickname)
        
        var wxResponseUserInfo = sessionStorage.getItem("sessionuserWxResponseUserInfo")
         if (wxResponseUserInfo != null && wxResponseUserInfo != '' && wxResponseUserInfo != undefined) {
            $(".member-info-img1").html('<img class="member-user-avatar-1" src="'+ wxResponseUserInfo +'" alt="">')
         }
         
        if (level == 2) {
            $(".member-user-level").html('会员用户')
            $(".member-user-avatar-info").html('<img class="member-user-avatar-2" src="/static/webAPP/images/huiyuaninfo.png" alt="">')
            $(".member-open-info").html('')
            $(".member-balance-info").html(userMony)
        }else{
            $(".member-user-level").html('你还不是会员')
            $(".member-user-avatar-info").html('')
            $(".member-open-info").html('<a href="javascript:void(0);" class="member-open">立即开通 / 成为会员</a>')
            $(".member-balance-info").html('0.00')
        }
		
		



		// 开通会员按钮
		$(document).on('click','.member-open',function(){
			var id = $(this).closest(".discounts-box2").attr("cid")
			//TODO:加入购物车
			if (userName == null || userName == '' || userName == undefined) {
				layer.open({
					content: '请先去登录账号',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}else{
                layer.open({
                    content: '正在支付',
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
				
				$.ajax({
					type: "post",
							//TODO:
					url: "/memberPay/BuyMembership/WePay",
					data: {amount: 200,user_id: user_id},
					dataType: "json",
					success: function(res){
						var wePayRequestAttr = res.data;
                        appId = wePayRequestAttr.appid;
                        timeStamp = wePayRequestAttr.timeStamp;
                        nonceStr = wePayRequestAttr.nonceStr;
                        prepayId =  wePayRequestAttr.prepayId;
                        signType = wePayRequestAttr.signType;
                        paySign = wePayRequestAttr.paySign;
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        }else{
                            onBridgeReady();
                        }
					},
                    error:function(){
                        layer.open({
                            content: '请从微信公众号进入支付',
                            skin: 'msg',
                            time: 3 //2秒后自动关闭
                        });
                    }
				})
			}
		})

        $(document).on('click','.money-box',function(){
            var num = $(this).children(".money-box-num").children("i").html()
            // $(this).css("background-color","#FAF6EB").siblings(".money-box").css("background-color","#F7F7F7")
            $(this).css({"background-color":"#FAF6EB","border":"1px solid #DEBC7A"}).siblings(".money-box").css({"background-color":"#F7F7F7","border":"1px solid #E5E5E5"})
            $(".member-btn").off("click").on("click",function(){
                if (userName == null || userName == '' || userName == undefined) {
                    layer.open({
                        content: '请先去登录账号',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }else{
                    layer.open({
                        content: '正在支付',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    $.ajax({
                        type: "post",
                                //TODO:
                        url: "/memberPay/AmountRecharge/WePay",
                        data: {amount: num,user_id: user_id},
                        dataType: "json",
                        success: function(res){
                            var wePayRequestAttr = res.data;
                            appId = wePayRequestAttr.appid;
                            timeStamp = wePayRequestAttr.timeStamp;
                            nonceStr = wePayRequestAttr.nonceStr;
                            prepayId =  wePayRequestAttr.prepayId;
                            signType = wePayRequestAttr.signType;
                            paySign = wePayRequestAttr.paySign;
                            if (typeof WeixinJSBridge == "undefined"){
                                if( document.addEventListener ){
                                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                                }else if (document.attachEvent){
                                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                                }
                            }else{
                                onBridgeReady();
                            }
                        },
                        error:function(){
                            layer.open({
                                content: '请从微信公众号进入支付',
                                skin: 'msg',
                                time: 3 //2秒后自动关闭
                            });
                        }
                    })
                }
            })
        })


		function onBridgeReady(){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId":"wx45db0b3d36e1f241",     //公众号名称，由商户传入
                "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr":nonceStr, //随机串
                "package":prepayId,
                "signType":signType,         //微信签名方式：
                "paySign":paySign //微信签名
            },
            function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    window.location.href="/static/webAPP/personal-center.html"
                }else{
                    layer.open({
                        content: '支付失败,请返回重新支付',
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                }
            });
        }
	})

</script>
</body>
</html>